<template>
	<el-card class="box-card el-card-flex">
		<!-- <div slot="header" class="clearfix">
            <span>
                <i class="el-icon-reading"></i>
                会议室使用
            </span>
            
        </div> -->
		<el-tabs class="el-tabs-bg el-flex el-tabs-flex" value="delegate" @tab-click="loadAgent">
			<el-tab-pane class="el-flex el-box-column" label="已预定" name="delegate">
				<el-form :inline="true" class="demo-form-inline" label-width="70px" @submit.native.prevent>
					<el-form-item label="开始时间">
						<el-date-picker v-model="start1" type="date" value-format="yyyy-MM-dd" style="width:150px" placeholder="选择日期"
						 :picker-options="pickerOptionsS" @change="start1Change">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="结束时间">
						<el-date-picker v-model="end1" type="date" value-format="yyyy-MM-dd" style="width:150px" placeholder="选择日期"
						 :picker-options="pickerOptionsE" @change="end1Change">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="">
						<el-select v-model="select1" placeholder="请选择" @change="sele1Change" style="width:100px">
							<el-option label="今天" :value="0"></el-option>
							<el-option label="明天" :value="1"></el-option>
							<el-option label="近七天" :value="6"></el-option>
							<el-option label="近十天" :value="9"></el-option>
							<el-option label="半个月" :value="14"></el-option>
							<el-option label="一个月" :value="29"></el-option>
						</el-select>
					</el-form-item>
					<!-- <el-form-item style="float:right">
            <el-button type="primary" plain @click="addAgent">
              导出
              <i class="el-icon-download"></i>
            </el-button>
          </el-form-item> -->
				</el-form>
				<div class="el-flex el-box-column">
					<el-table :data="myDelegateData" border stripe style="width: 100%" height="100%" ref="agentTable">
						<el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="meetingSubject" label="会议主题">
							<template slot-scope="scope">
								<div class="agentName" @click="handleAgentName1(scope.$index,scope.row)">
									<span>{{scope.row.meetingSubject}}</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="roomName" label="会议室名称"></el-table-column>
						<el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="members" label="人数" align="right"></el-table-column>
						<el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="createdByName" label="发起人" align="center"></el-table-column>

						<el-table-column min-width="120px" sortable :show-overflow-tooltip="true" prop="" label="开始时间" align="center">
							<template slot-scope="scope">
								<span>{{scope.row.meetingDate}}</span>
								<span>{{scope.row.startTime}}</span>
							</template>
						</el-table-column>
						<el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="" label="结束时间" align="center">
							<template slot-scope="scope">
								<span>{{scope.row.meetingDate}}</span>
								<span>{{scope.row.endTime}}</span>
							</template>
						</el-table-column>
						<el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="" label="状态" align="center">
							<template slot-scope="scope">
								<span v-if="scope.row.auditStatus=='E'">{{scope.row.currentStatus}}</span>
								<span v-else>{{scope.row.auditStatusDesc}}</span>
							</template>
						</el-table-column>
						<el-table-column min-width="100px" :show-overflow-tooltip="true" prop="" align="center" label="操作" width="100">
							<template slot-scope="scope">
								<el-button class="td-btn-icon" type="text" title="取消" icon="el-icon-close" v-if="scope.row.currentStatus == '未开始'"
								 @click="handleCancel(scope.$index, scope.row)"></el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<!-- 分页 -->
				<!-- <el-pagination
          background
          @size-change="handleAgentSizeChange"
          @current-change="handleAgentCurrentChange"
          :current-page="currentAgentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageAgentSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalAgent">
        </el-pagination> -->
			</el-tab-pane>


			<el-tab-pane class="el-flex el-box-column" label="待处理" name="theAgent" lazy>
				<el-form :inline="true" class="demo-form-inline" label-width="70px" @submit.native.prevent>
					<el-form-item label="开始时间">
						<el-date-picker v-model="start2" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width:150px"
						 placeholder="选择日期" :picker-options="pickerOptionsS2" @change="start2Change">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="结束时间">
						<el-date-picker v-model="end2" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width:150px"
						 placeholder="选择日期" :picker-options="pickerOptionsE2" @change="end2Change">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="">
						<el-select v-model="select2" placeholder="请选择" @change="sele2Change" style="width:100px">
							<el-option label="今天" :value="0"></el-option>
							<el-option label="明天" :value="1"></el-option>
							<el-option label="近七天" :value="6"></el-option>
							<el-option label="近十天" :value="9"></el-option>
							<el-option label="半个月" :value="14"></el-option>
							<el-option label="一个月" :value="29"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div class="el-flex el-box-column">
					<el-table :data="myProxyData" border stripe style="width: 100%" height="100%" ref="agentTable">
						<el-table-column min-width="120px" sortable :show-overflow-tooltip="true" prop="meetingSubject" label="会议主题">
							<template slot-scope="scope">
								<div class="agentName" @click="handleAgentName(scope.$index,scope.row)">
									<span>{{scope.row.meetingSubject}}</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column min-width="120px" sortable :show-overflow-tooltip="true" prop="roomName" label="会议室名称"></el-table-column>
						<el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="createdByName" label="发起人" align="center"></el-table-column>

						<el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="startTime" label="开始时间" align="center">
							<template slot-scope="scope">
								<span>{{scope.row.meetingDate}}</span>
								<span>{{scope.row.startTime}}</span>
							</template>
						</el-table-column>
						<el-table-column min-width="120px" sortable :show-overflow-tooltip="true" prop="endTime" label="结束时间" align="center">
							<template slot-scope="scope">
								<span>{{scope.row.meetingDate}}</span>
								<span>{{scope.row.endTime}}</span>
							</template>
						</el-table-column>
						<el-table-column min-width="100px" sortable prop="" align="center" label="操作" width="100" fixed="right">
							<template slot-scope="scope">
								<el-button class="td-btn-icon" type="text" title="批准" icon="el-icon-check" @click="handleConsent(scope.$index, scope.row)"></el-button>
								<el-button class="td-btn-icon" type="text" title="驳回" icon="el-icon-close" @click="handleRejected(scope.$index, scope.row)"></el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<!-- 分页 -->
				<!-- <el-pagination
          background
          @size-change="handleTheagentSizeChange"
          @current-change="handleTheagentCurrentChange"
          :current-page="currentTheagentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageTheagentSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalTheagent">
        </el-pagination> -->

			</el-tab-pane>
		</el-tabs>
	</el-card>
</template>

<script>
	import {
		Tree,
		Dialog,
		Table,
		TableColumn,
		Pagination,
		MessageBox,
		Message,
		Drawer,
		Tabs,
		TabPane
	} from 'element-ui'
	import {
		approvedList, //已预定列表
		auditList, //待处理
		putAudit, //会议室预定审核处理
		putCancel, //取消
	} from '@/api/conference/conferenceEmploy.js'
	export default {
		name: 'holidayRules',
		components: {
			'el-tree': Tree, // 树形菜单
			'el-dialog': Dialog, // 对话框
			'el-table': Table, // 表格
			'el-table-column': TableColumn, // 表格列
			'el-pagination': Pagination, // 分页
			'el-drawer': Drawer, // 抽屉
			'el-tabs': Tabs, // 标签页
			'el-tab-pane': TabPane // 标签页列
		},
		data() {
			return {

				formInline: {},
				totalTheagent: 0, // 总条数
				totalAgent: 0, // 总条数
				total: 50, // 分页总条数
				pageAgentSize: 20, // 显示页数
				pageTheagentSize: 20, // 显示页数
				currentAgentPage: 1, // 当前展示页
				currentTheagentPage: 1, // 当前展示页

				agentStatusObj: {
					A: '起草',
					E: '批准',
					C: '审批',
					D: '已驳回',
					R: '已取消',
					B: '未开始'
				},
				myDelegateData: [], // 有我委派列表数据
				myProxyData: [], // 由我代理关系列表数据
				agentStatus: '', // 当前请求的代理关系状态
				delegateData: [{
						agentToName: '委托人',
						agentToList: '代理人',
						agentType: 'ALL',
						startTime: '2019-08-08',
						endTime: '2019-08-08',
						agentStatus: '生效',
						agentReason: "请假原因"
					},
					{
						agentToName: '委托人',
						agentToList: '代理人',
						agentType: 'PART',
						startTime: '2019-08-08',
						endTime: '2019-08-08',
						agentStatus: '生效',
						agentReason: "请假原因"
					}
				],
				dialogDelegateSearchVisible: false, // 有我代理高级查询弹框是否显示值
				delegateSearchForm: {}, //  有我代理高级查询表单model
				dialogAgentSearchVisible: false, // // 有我委托高级查询弹框是否显示值
				agentSearchForm: {}, //  有我委托高级查询表单model
				searchData: '', // 存储由我代理搜索来的数据
				textSearch: '', // 由我代理模糊搜索model值
				deleSearchData: '', // 存储由我委派搜索来的数据
				deleSearch: '', // 由我委派模糊搜索model值
				start1: this.getDate(),
				end1: this.getDate(6),
				select1: 6,
				start2: this.getDate(),
				end2: this.getDate(6),
				select2: 6,
				//已预定开始时间
				pickerOptionsS: {
					disabledDate: time => {
						if (this.end1) {
							return (
								time.getTime() > new Date(this.end1).getTime() //不能选择的时间值
							)
						}
					},
				},
				//已预定结束时间
				pickerOptionsE: {
					disabledDate: time => {
						if (this.start1) {
							return (
								time.getTime() < new Date(this.start1).getTime() - 8.64e7 // 加- 8.64e7则表示包当天
							)
						}

					},
				},
				//待处理开始时间
				pickerOptionsS2: {
					disabledDate: time => {
						if (this.end2) {
							return (
								time.getTime() > new Date(this.end2).getTime() //不能选择的时间值
							)
						}
					},
				},
				//待处理结束时间
				pickerOptionsE2: {
					disabledDate: time => {
						if (this.start2) {
							return (
								time.getTime() < new Date(this.start2).getTime() - 8.64e7 // 加- 8.64e7则表示包当天
							)
						}

					},
				},
				isFlag: false,
			}
		},
		created() {

			this.myDelegateTable() // 已预定列表数据
			this.myProxyTable() // 待处理列表数据
			window.onresize = () => {
				this.$refs.agentTable.doLayout() //监听窗口变化，重绘表格布局
			}
		},
		// watch: {
		// 监听代理用户状态关系的变化触发表格数据变化
		//   agentStatus: {
		//     immediate: true,
		//     handler (newVal) {
		//       this.currentAgentPage = 1
		//       this.myDelegateTable(this.currentAgentPage, this.pageAgentSize)
		//     },
		//   }
		// },
		methods: {
			/* 获取当前系统日期 */
			getDate(num) {
				if (!num) {
					num = 0
				}
				let objDate = new Date()
				objDate.setDate(objDate.getDate() + num) //加天数
				let month = objDate.getMonth() + 1
				if (month < 10) {
					month = '0' + month
				}
				let day = objDate.getDate()
				if (day < 10) {
					day = '0' + day
				}
				let strDate = objDate.getFullYear() + "-" + month + "-" + day
				return strDate
			},
			// 切换选项卡时,刷新表格
			loadAgent(obj) {
				if (obj.name == "delegate") {
					this.myDelegateTable() // 已预定列表数据
					this.isFlag = false
					window.onresize = () => {
						this.$refs.agentTable.doLayout() //监听窗口变化，重绘表格布局
					}
				} else if (obj.name == "theAgent") {
					this.myProxyTable() // 待处理列表数据
					this.isFlag = true
					window.onresize = () => {
						this.$refs.agentTable.doLayout() //监听窗口变化，重绘表格布局
					}
				}
			},
			// 已预定列表数据
			myDelegateTable() {
				approvedList({
					value: {
						startDate: this.start1 ? this.start1 : '1949-10-01',
						endDate: this.end1 ? this.end1 : '2050-10-01',
					}
				}).then(res => {
					this.myDelegateData = res.data.data.records
					setTimeout(() => {
						this.$refs.agentTable.doLayout() // 重绘表格宽度，解决表头对不齐的问题
					}, 0)
				})
			},
			// 待处理列表数据
			myProxyTable() {
				auditList({
					value: {
						startDate: this.start2 ? this.start2 : '1949-10-01',
						endDate: this.end2 ? this.end2 : '2050-10-01',
					}
				}).then(res => {
					this.myProxyData = res.data.data.records
					setTimeout(() => {
						this.$refs.agentTable.doLayout() // 重绘表格宽度，解决表头对不齐的问题
					}, 0)
				})
			},

			// 由我委托列表里的每条页数
			handleAgentSizeChange(val) {
				this.pageAgentSize = val
				this.myDelegateTable()
			},
			// 由我委托当前页
			handleAgentCurrentChange(val) {
				this.currentAgentPage = val
				if (this.searchData) {
					this.myDelegateTable()
				} else if (this.dialogAgentSearchVisible) {
					this.myDelegateTable()
				} else {
					this.myDelegateTable()
				}
			},
			//会议主题点击
			handleAgentName(index, row) {

				if (this.isFlag) {
					row.isShow = true
				} else {
					row.isShow = false
				}

				this.giveFuncEvt(row)
			},
			//会议主题点击
			handleAgentName1(index, row) {
				if (this.isFlag) {
					row.isShow = true
				} else {
					row.isShow = false
				}
				console.log(row)
				// if (row.currentStatus == '未开始') {
				// 	this.giveFuncEmp(row)
				// } else {
				// 	this.giveFuncEvt(row)
				// }
				// return false;
				this.giveFuncEvt(row)

			},
			giveFuncEmp(row) {
				//this.multiRouters是全局提供的自动添加多级路由的方法
				this.$router.addRoutes(this.multiRouters([{
					path: 'editEmploy',
					name: 'editEmploy', //自定义name名称
					component: () => import('@/views/conference/conferenceEmploy/upEmploy'),
					meta: {
						title: '会议室'
					}
				}]));
				this.$router.push(this.routerMatch({
					name: "editEmploy", //顶部导航+侧边导航
					params: {
						row: row
					}
				}))
			},
			/*跳转到新增功能路由组件*/
			giveFuncEvt(row) {
				//this.multiRouters是全局提供的自动添加多级路由的方法
				this.$router.addRoutes(this.multiRouters([{
					path: 'meetingDetails',
					name: 'meetingDetails', //自定义name名称
					component: () => import('@/views/conference/conferenceEmploy/meetingDetails'),
					meta: {
						title: '会议室'
					}
				}]));
				this.$router.push(this.routerMatch({
					name: "meetingDetails", //顶部导航+侧边导航
					params: {
						row: row
					}
				}))
			},
			// 导出
			addAgent() {

			},
			//待处理批准
			handleConsent(index, row) {
				MessageBox.confirm("您确定要批准“" + row.meetingSubject + "”吗?", '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						putAudit({
							auditStatus: 'E',
							auditStatusDesc: '批准'
						}, row.reservationId).then(res => {
							if (res.data.code === 10000) {
								Message.success('批准成功')
								this.myProxyTable()
							}
						})
					})
					.catch(() => {})
			},
			// 待处理驳回
			handleRejected(index, row) {
				MessageBox.confirm("您确定要驳回“" + row.meetingSubject + "”吗?", '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						putAudit({
							auditStatus: 'D',
							auditStatusDesc: '驳回'
						}, row.reservationId).then(res => {
							if (res.data.code === 10000) {
								Message.success('驳回成功')
								this.myProxyTable()
							}
						})
					})
					.catch(() => {})
			},
			//已预定取消会议
			handleCancel(index, row) {
				MessageBox.confirm("您确定要取消“" + row.meetingSubject + "”吗?", '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						putCancel(row.reservationId).then(res => {
							if (res.data.code === 10000) {
								Message.success('取消成功')
								this.myDelegateTable()
							}
						})
					})
					.catch(() => {})
			},
			// 由我代理每页条数
			handleTheagentSizeChange(val) {
				this.pageTheagentSize = val
				this.myProxyTable()
			},
			// 由我代理当前页数
			handleTheagentCurrentChange(val) {
				this.currentTheagentPage = val
				if (this.deleSearchData) {
					this.myProxyTable()
				} else if (this.dialogDelegateSearchVisible) {
					this.myProxyTable()
				} else {
					this.myDelegateTable()
				}
			},
			//已预定开始时间改变
			start1Change() {
				this.select1 = ''
				this.myDelegateTable()
			},
			//已预定结束时间改变
			end1Change() {
				this.select1 = ''
				this.myDelegateTable()
			},
			//待处理开始时间改变
			start2Change() {
				this.select2 = ''
				this.myProxyTable()
			},
			//待处理结束时间改变
			end2Change() {
				this.select2 = ''
				this.myProxyTable()
			},
			//已预定下拉选择
			sele1Change(val) {
				this.end1 = this.getDate(val)
				if (val == '1') { //明天
					this.start1 = this.getDate(1)
				} else {
					this.start1 = this.getDate()
				}
				this.myDelegateTable()
			},
			//待处理下拉选择
			sele2Change(val) {
				this.end2 = this.getDate(val)
				if (val == '1') { //明天
					this.start2 = this.getDate(1)
				} else {
					this.start2 = this.getDate()
				}
				this.myProxyTable()
			},
		}
	};
</script>
<style lang="scss" scoped>
	.agentName {
		cursor: pointer;
		color: #409EFF;
	}

	.agentName span:hover {
		border-bottom: 1px solid #409EFF;
	}

	.el-tabs-bg {
		border-top: none !important;
		border-left: none !important;
		border-right: none !important;
	}
</style>
